<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">设备管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>设备类型</el-breadcrumb-item>
    </el-breadcrumb>

    <div style="border:  1px solid #ccc; margin: 30px 3px;padding: 20px;">
        <el-button  type="success"  @click="AddDeviceType">新增+</el-button>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="90" />
            <el-table-column prop="Id" label="编号" width="150" />
            <el-table-column prop="DeviceTypeCode" label="设备编码" width="150" />
            <el-table-column prop="DeviceTypeName" label="设备名称" width="150" />
            <el-table-column prop="DeviceTypeDescription" label="设备描述" width="150" />
            <el-table-column prop="CreatedBy" label="创建人" width="150" />
            <el-table-column prop="CreatedTime" label="创建时间" width="180" >
                <template v-slot="setup">
                    <span>{{ setup.row.CreatedTime.substring(0,10) }} {{ setup.row.CreatedTime.substring(11,19) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="UpdatedTime" label="更新时间" width="180" >
                <template v-slot="setup">
                    <span>{{ setup.row.UpdatedTime.substring(0,10) }} {{ setup.row.UpdatedTime.substring(11,19) }}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="150">
            <template #default>
                <el-button link type="primary" size="small" @click="handleClick">
                Detail
                </el-button>
                <el-button link type="primary" size="small">Edit</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
    
</template>

<script lang="ts" setup>
    import axios from 'axios';
    import {ref,reactive,onMounted} from 'vue';

    const handleClick = () => {
        console.log('click')
    }

    onMounted(()=>{
        GetDeviceTypeList();
    })
    const tableData = ref([]);
    //分页响应式数据
    const PageInfo=ref({
        PageIndex:1,
        PageSize:3,
        TotalCount:0,
        TotalPage:0,
    })
    const GetDeviceTypeList=()=>{
        axios.get("http://localhost:5229/api/DeviceType/GetDeviceTypeList",
            {
                params:{
                    PageIndex:PageInfo.value.PageIndex,
                    PageSize:PageInfo.value.PageSize,
                }
            }
        )
        .then(res=>{
            tableData.value=res.data.PageData;
            PageInfo.value.TotalCount=res.data.TotalCount;
            PageInfo.value.TotalPage=Math.ceil(PageInfo.value.TotalCount*1.0/PageInfo.value.PageSize);
        })
    }

    const AddDeviceType=()=>{
        
    }
</script>
